﻿@{
    ViewBag.Title = "任务关系·自由飞·任务管理系统";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using FFLTask.SRV.ViewModel.Task
@using FFLTask.GLB.Global.Enum
@using Global.Core.ExtensionMethod
@model TaskRelationModel
@{
    Model.Brothers.Add(Model.Current);
    IList<LiteItemModel> brothersAndMySelf = Model.Brothers.OrderBy(x => x.Sequence).ToList();
    IList<LiteItemModel> children = Model.Children.OrderBy(x => x.Sequence).ToList();
}
<style type="text/css">
    .status {
        margin-left: 8px;
        font-size: 12px;
    }

    .sequence_change {
        background-color: #b3c5d0;
        border: 1px dashed;
        text-decoration: none;
        color: Black;
        font-size: 12px;
        padding: 2px 4px;
        margin-left: 60px;
    }

    .sequence_change_panel {
        border: 1px dashed;
    }

    #parent {
        display: block;
        width: 70px;
        font-size: 16px;
        border: 1px dashed;
        padding: 3px 6px;
        margin-bottom: 16px;
    }
</style>
<div id="main">
    <h3>任务关系</h3>
    @if (Model.Parent != null)
    {
        if (Model.Parent.NodeType != NodeType.Root)
        {
            <a href="/Task/Relation/@Model.Parent.Id" id="parent">&lt;&lt;上一级</a>
        }
        @Html.Partial("Relation/_Item", Model.Parent)
    }
    @if (brothersAndMySelf.Count > 1)
    {
        <a class="sequence_change" href="/Task/Sequence/@Model.Parent.Id">改变次序</a>
    }
    <ul id="tree">
        @foreach (LiteItemModel brother in brothersAndMySelf)
        {
            if (brother == Model.Current)
            {
                if (!children.IsNullOrEmpty())
                {
                    <li>
                        <span style="font-weight: bold">@Html.Partial("Relation/_Item", brother)</span>
                        @if (children.Count > 1)
                        {
                            <a class="sequence_change" href="/Task/Sequence/@Model.Current.Id">改变次序</a>
                        }
                        <ul>
                            @foreach (LiteItemModel child in children)
                            {
                                <li>
                                    @Html.Partial("Relation/_Item", child)
                                </li>
                            }
                        </ul>
                    </li>
                }
                else
                {
                    <li style="font-weight: bold">
                        @Html.Partial("Relation/_Item", brother)
                    </li>
                }
            }
            else
            {
                <li>
                    @Html.Partial("Relation/_Item", brother)
                </li>
            }
        }
    </ul>

</div>
<link rel="stylesheet" href="/Resource/StyleSheet/treeview.css" />
<script src="/Resource/Scripts/treeview.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".sequence_change").click(function (event) {
            event.preventDefault();
            var url = $(this).attr("href");
            openWindow(url, "改变次序", 800, 600);
        });
        $("#tree").treeview({
            collapsed: false
        });
        $(".parent_node").click(loadChildren);
        $("a.sequence_change").hover(showSequences);
    });

    function loadChildren(event) {
        event.preventDefault();
        var $this = $(this);
        var $container = $(this).closest("li");
        if ($container.find("ul").length == 0) {
            var $parentId = $(this).attr("parentId");
            $.ajax({
                url: "/Task/_Children/" + $parentId,
                beforeSend: function () {
                    $this.hide();
                },
                success: function (data) {
                    $container.append(data);
                    $container.find("a.sequence_change").hover(showSequences);
                    $container.find("a.parent_node").click(loadChildren);
                    $("#tree").treeview();
                },
                complete: function () {
                    $this.show();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    JqueryAjaxError(jqXHR, textStatus, errorThrown);
                }
            })
        }
    }

    function showSequences() {
        $(this).next("ul").toggleClass("sequence_change_panel");
    }

</script>

